<template>
  <a-form :form="form" class="login-form" @submit="handleSubmit">
    <a-form-item>
      <img alt="Vue logo" src="@/assets/logo.png" />
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="[
          'username',
          {
            rules: [{ required: true, message: '请输入用户名!' }],
          },
        ]"
        placeholder="用户名"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="[
          'password',
          {
            rules: [{ required: true, message: '请输入密码!' }],
          },
        ]"
        type="password"
        placeholder="密码"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-checkbox
        v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
        >记住我</a-checkbox
      >
      <a class="login-form-forgot" href>忘记密码</a>
      <a-button type="primary" html-type="submit" class="login-form-button"
        >登录</a-button
      >
      <a href="/register">注册</a>
    </a-form-item>
  </a-form>
</template>

<script>
import { login } from "@/api/login";
import { SET_USERINFO } from "@/types/mutation-types";
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          console.log("表单里输入的值: ", values);
          var { username, password } = values;
          login(username, password)
            .then((res) => {
              this.loading = false;
              const { name, age, nickname, ageInternet } = res;
              this.$message.info(
                `欢迎登录！`
              );
              window.console.log(SET_USERINFO);
              this.$store.dispatch("user/"+SET_USERINFO, {
                name,
                age,
                nickname,
                ageInternet,
              });
              this.$router.push({ path: "home" });
            })
            .catch((error) => { // eslint-disable-line no-unused-vars
              this.loading = false;
              this.$message.error("登陆失败！");
            });
        }
      });
    },
  },
};
</script>
<style>
.login-form {
  max-width: 300px;
  margin: auto !important;
}
.login-form-forgot {
  float: right;
}
.login-form-button {
  width: 100%;
}
</style>